
{% extends '__base__.html' %}
{% block title %}用户{% endblock %}
{% block beforehead %}
<script>

function initVM(data) {

    $('#vm').show();

    var vm = new Vue({

        el: '#vm',

        data: {

            users: data.users,

            page: data.page

        }

    });

}

$(function() {

    getJSON('/api/users', {

        page: {{ page_index }}

    }, function (err, results) {

        if (err) {

            return fatal(err);

        }

        $('#loading').hide();

        initVM(results);

    });

});



</script>



{% endblock %}



{% block content %}



    <div class="uk-width-1-1 uk-margin-bottom">

        <div class="uk-panel uk-panel-box">

            <ul class="uk-breadcrumb">

                <li><a href="/manage/comments">评论</a></li>

                <li><a href="/manage/blogs">日志</a></li>

                <li class="uk-active"><span>用户</span></li>

            </ul>

        </div>

    </div>



    <div id="error" class="uk-width-1-1">

    </div>



    <div id="loading" class="uk-width-1-1 uk-text-center">

        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>

    </div>



    <div id="vm" class="uk-width-1-1">

        <table class="uk-table uk-table-hover">

            <thead>

                <tr>

                    <th class="uk-width-4-10">名字</th>

                    <th class="uk-width-4-10">电子邮件</th>

                    <th class="uk-width-2-10">注册时间</th>

                </tr>

            </thead>

            <tbody>

                <tr v-repeat="user: users" >

                    <td>

                        <span v-text="user.name"></span>

                        <span v-if="user.admin" style="color:#d05"><i class="uk-icon-key"></i> 管理员</span>

                    </td>

                    <td>

                        <a v-attr="href: 'mailto:'+user.email" v-text="user.email"></a>

                    </td>

                    <td>

                        <span v-text="user.created_at.toDateTime()"></span>

                    </td>

                </tr>

            </tbody>

        </table>

        <div v-component="pagination" v-with="page"></div>

    </div>



{% endblock %}